<template>

    <div id="forum">
        <!-- 版图 -->

        <div class="forum-banner">
            <el-row>

                <div class="runner-car">
                    <el-carousel height="180px" arrow="never" :interval="5000">
                        <el-carousel-item v-for="url in barphotosUrl" :key="this">
                            <div class="forum-header" v-bind:style="{backgroundImage:'url(' + url + ')'}">

                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>

                <div class="forum-menu" ref="menu">
                    <el-row>
                        <el-col :lg="{span:4}" class="forum-photo">
                            <div :style="{backgroundImage:'url('+'http://localhost:8080/img/header/'+userName+'.jpg'}">
                            </div>
                        </el-col>
                        <el-col :lg="{span:18}" class="forum-words">
                            <div class="username">
                                {{userName}}
                            </div>
                            <div class="description">
                                欢迎来到分享空间
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-row>
        </div>

        <!-- 帖子列表 -->
        <div class="forum-list">

            <el-row>
                <!-- 两个卡片 -->
                <el-col :lg="{span:9}" v-infinite-scroll="requestForumData" infinite-scroll-delay="400">
                    <ul class="card-list">
                        <li v-for="(content,index) in contentListL" @click="turnToForumContent($event,content['forumID'])" :key="index" :id="'forum-'+index">
                            <div class="card" ref="one-card" :id="'card-'+index">
                                <div class="user-info">
                                    <a>
                                        <el-avatar :size="35" :src="'http://localhost:8080/img/header/'+content['userName']+'.jpg'"></el-avatar>
                                    </a>
                                    <div class="send-name">{{content['userName']}}</div>
                                </div>
                                <div class="send-index">发布文字</div>
                                <!-- 文字摘要 -->
                                <div class="article" v-html="content['content']">
                                    <!--{{content['content']}}-->
                                </div>
                                <!-- 底部按钮 -->
                                <div class="bottom">
                                    <div class="visit-num"><i class="iconfont icon-icon-test"></i>{{content['visitNum']}}</div>
                                    <div class="answer-num"><i class="iconfont icon-qipao"></i>{{content['recommendNum']}}</div>
                                </div>
                            </div>
                        </li>

                    </ul>
                </el-col>

                <el-col :lg="{span:9}">
                    <ul class="card-list">
                        <li v-for="(content,index) in contentListR" @click="turnToForumContent($event,content['forumID'])" :key="index" :id="'forum-'+index">
                            <div class="card"  ref="one-card">
                                    <div class="user-info">
                                        <a>
                                            <el-avatar :size="35" :src="'http://localhost:8080/img/header/'+content['userName']+'.jpg'"></el-avatar>
                                        </a>
                                        <div class="send-name">{{content['userName']}}</div>
                                    </div>
                                    <div class="send-index">发布文字</div>
                                    <!-- 文字摘要 -->
                                    <div class="article" v-html="content['content']">
                                        <!--{{content['content']}}-->
                                    </div>
                                    <!-- 底部按钮 -->
                                    <div class="bottom">
                                        <div class="visit-num"><i class="iconfont icon-icon-test"></i>{{content['visitNum']}}</div>
                                        <div class="answer-num"><i class="iconfont icon-qipao"></i>{{content['recommendNum']}}</div>
                                    </div>
                                </div>
                        </li>
                    </ul>
                </el-col>

            </el-row>
        </div>

        <!-- 侧边栏 -->
        <el-col :lg="{span:6}" v-bind:class="{'sidebar-fixed':isSideFixed}" class="side" ref="sidebar">
            <div class="aside">
                <div class="recommend">
                    <div class="title">热度榜</div>
                    <hr>
                    <div class="recommend-list">
                        <ul>
                            <li v-for="(pop,index) in popList" @click="turnToPopForum($event,pop['forumID'])"><span ref="pop">{{index+1}}</span>{{pop['title']}}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </el-col>


        <!--发表新帖 -->
        <div class="new-forum" ref="newForum">
            <give-comment :inputsize="inputsize" :action="action" :receive-url="receiveUrl" :slot-message="form.title" :give-comment="this.giveComment" @send-success="sendSucess">
                <div class="forum-title">
                    <el-form :rules="rules" :model="form">
                        <el-form-item prop="title">
                            <el-input v-model="form.title" placeholder="请输入标题" size="medium" maxlength="30" show-word-limit></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </give-comment>
        </div>

    </div>
</template>

<script>
    import GiveComment from '../../components/givecomment/GiveComment'
    import ElRadio from "element-ui/packages/radio/src/radio";
    import GFooter from "../../components/gfooter/GFooter";
    export default {
        components: {
            GFooter,
            ElRadio,
            GiveComment},
        name: "forum",
        created(){
          window.document.body.style.backgroundColor='rgb(199, 219, 241)';
          this.requestForumData();
          this.request({
              url:'/forum/getpop'
          }).then(res=>{
            for(let i=0;i<res.data.length;i++)
                this.popList.push(res.data[i]);
          });
        },
        destroyed: function () {
            window.removeEventListener('scroll', this.handleScroll, true);   //  离开页面清除（移除）滚轮滚动事件
        },
        beforeRouteLeave(to,from,next){
            window.document.body.style.backgroundColor='';
            next();
        },
        mounted(){
            window.addEventListener('scroll',this.handleScroll,true);
        },
        updated(){
            for(let i=3;i<this.$refs['pop'].length;i++){
                this.$refs['pop'][i].style.backgroundColor = '#ccd0d7'
            }

        },
        data: function(){
            return {
                src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                inputsize:{minRows: 12},
                form:{
                    title: ''
                },
                rules: {
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' }
                    ]
                },
                isSideFixed:false,
                isCardHide: false,
                giveComment:{
                    "content":'',
                    "userName":'',
                    "title":'',
                    "basicUrl":''
                },//传递给giveComment的发送对象
                lastPage: '0',
                contentListL:[],
                contentListR:[],
                popList:[],
                action:'http://127.0.0.1:8080/forum/upimage',//提交图片后端处理url
                receiveUrl:'http://127.0.0.1:8080/forum/receivecontent',//提交文本框内容后端处理url
                barphotosUrl: [require('@/assets/image/forum/bac1.jpg'),
                    require('@/assets/image/forum/bac2.jpg'),
                    require('@/assets/image/forum/bac3.jpg')]
            }
        },
        computed:{
            userName:function() {
                return window.localStorage['username'];
            }
        },
        methods:{
            requestForumData(){
                this.request({
                    url:"/forum/getforums/"+this.lastPage
                }).then(res=>{

                    if(res.data.length == 0){
                        return;
                    }
                    let nextPage = res.data[res.data.length-1]['forumID'];
                    if(nextPage == this.lastPage){
                        return;
                    }
                    this.lastPage = nextPage;
                    let mid = res.data.length/2;
                    for(let i=0;i<res.data.length;i+=2){
                        let content = res.data[i]['content'];
                        let title = res.data[i]['title'];
                        let temp = this.forMateContent(content,title,res.data[i]['basicUrl']);
                        res.data[i]['content'] = temp['content'];
                        res.data[i]['title'] = temp['title'];
                        this.contentListL.push(res.data[i]);
                        if(i+1<res.data.length){
                            let content = res.data[i+1]['content'];
                            let title = res.data[i+1]['title'];
                            let temp = this.forMateContent(content,title,res.data[i+1]['basicUrl']);
                            res.data[i+1]['content'] = temp['content'];
                            res.data[i+1]['title'] = temp['title'];
                            this.contentListR.push(res.data[i+1]);
                        }else{
                            break;
                        }
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            forMateContent(content,title,basicUrl){
                content = '<a>'+title+'</a>'+'<p>'+content;
                let reg=new RegExp('\n','g')//g代表全部
                content = content.replace(reg,'</p><p>');
                // console.log(content);
                let imgList = content.match(/\/IMG (.*?) IMG\//);
                for(let i=0;imgList!=null&&i<imgList.length;i+=2){
                    let contentInside = imgList[i];//文本内的
                    let fileName = imgList[i+1];//文件名
                    let requestUrl = 'http://127.0.0.1:8080/img/forum/'+basicUrl+'/'+fileName;//请求url
                    let htmlImg = '<img src="'+requestUrl+'" >';
                    content = content.replace(contentInside,htmlImg);

                }
                return {
                    "content":content,
                    "title":title
                }
            },
            turnToForumContent(event,forumID){
                this.$router.push({
                    path:'/forumcontent',
                    query:{
                        forumID:forumID
                    }}).catch(error=>error);
            },
            handleScroll() {
                let distance = this.$refs['sidebar'].$el.getBoundingClientRect().top;
                if(distance <= 0){
                    this.isSideFixed = true;
                }
                let top = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageXOffset)//当前滚动条位置
                if(top>=864 || top<=358){
                    this.isSideFixed = false;
                }

                //在一定高度时改变卡片透明度
                for(let i=0;i<this.$refs['one-card'].length;i++){
                    let cardDistance = this.$refs['one-card'][i].getBoundingClientRect().top;
                    let menuDistance = this.$refs['menu'].getBoundingClientRect().top;
                    let commentDistance = this.$refs['newForum'].getBoundingClientRect().top;//评论距离顶部的高度
                    let cardHeight = this.$refs['one-card'][i].offsetHeight;
                    let jugeDistance = menuDistance-cardDistance+102;
                    let cardToCommentDis = commentDistance-cardDistance-cardHeight;//评论和卡片的距离

                    if(cardToCommentDis < 0){
                        this.$refs['one-card'][i].style.opacity = 1.0/(cardHeight-2)*cardToCommentDis+cardHeight/(cardHeight-2);
                    }
                    else
                        this.$refs['one-card'][i].style.opacity = 1-(1.0/cardHeight)*jugeDistance;
                }

            },
            sendSucess(){
                this.$router.go(0);
            },
            turnToPopForum(event,forumID){
                this.$router.push({
                    path:'/forumcontent',
                    query:{
                        forumID:forumID
                    }}).catch(error=>error);
            }
        }
    }
</script>

<style scoped>
#forum{
    height: 100%;
    width: 80%;
    margin-left: 10%;
}

hr{
    border: none;
    height: 1px;
    background-color: #e5e5e5;
}
.forum-banner{
    margin-top: 20px;
    box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0, 0, 0, 1);
}
.runner-car{
    z-index: -2;
}
.forum-list{
    width: 100%;
    height:1000px;
    overflow-y: auto;
}
.forum-list::-webkit-scrollbar {
    display: none;
}
.card-list{

}

.new-forum{
    height: auto;
    width: 75%;
}
.forum-header{
    height: 180px;
    /*background-color: #eee;*/
    border-radius: 6px;
    background: url("https://cdn.wispx.cn/wallpaper/2020/03/19/1eb6d95b4ca664d670cb61e7c6adfc8a.jpg!wallpaper.detail") no-repeat center;
    background-size: cover;
}
.forum-menu{
    height: 100px;
    border: 1px solid #eee;
    border-radius: 6px;
    background-color: white;
}

.forum-photo{
    top: -80px;
    position: absolute;
    padding-left: 5px;
    margin-left: 10px;
    z-index: 100;
}
.forum-photo>div{
    height: 150px;
    width: 150px;
    border: 4px white solid;
    background:url("http://www.obzhi.com/wp-content/uploads/2020/05/huaxuegou.jpg") center no-repeat;
    background-size: cover;
    border-radius: 6px;
    box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
}
.forum-words{
    margin-left: 15px;
    position: absolute;
    left: 180px;
}
.title,.username{
    margin: 10px 0;
    font-size: 20px;
}
.description{
    font-size: 13px;
    font-weight: 300;
}

.reply-num>div{
    height: 20px;
    width: 35px;
    margin-left: 15%;
    text-align: center;
    line-height: 20px;
    background-color: #eae8e8;
    font-size: 13px;
    color: #7b7b77;
}

.aside{
    background-color: white;
    border-radius: 6px;
    margin-top: 16px;
}
.recommend{
    padding: 10px 20px;
}
.recommend-list{
    
}
.recommend-list>ul li{
    margin-bottom: 10px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    cursor: pointer;
}
.recommend-list>ul li>span{
    height: 18px;
    width: 18px;
    display: block;
    float: left;
    margin-top: 6px;
    background-color: rgb(242,93,142);
    color: white;
    border-radius: 4px;
    margin-right: 5px;
    text-align: center;
    line-height: 18px;
}
.card{
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 16px;
    background-color: white;
    margin: 15px 5px;
}
.user-info{
    display: flex;
}
.send-name{
    height: 40px;
    line-height: 40px;
    margin-left: 5px;
    font-weight: 600;
    font-size: 14px;
}
.send-index{
    font-size: 14px;
    margin-top:5px;
    margin-bottom: 5px;
}
.article{
    width: 90%;
    min-height: 100px;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 16px;
}
.bottom{
    height: 35px;
    margin-top: 10px;
    display: flex;
    flex-direction: row-reverse;
}
.answer-num,.visit-num{
    height: 35px;
    line-height: 35px;
    margin-left: 20px;
    margin-right: 5px;
    font-size: 14px;
    color: rgb(161,161,166);
}
.forum-title{
    width: 93%;
    margin-left: 4%;
    margin-top: 20px;
}
.article >>> img{
    max-width: 100%;
    border-radius: 8px;
}
.article >>> a{
    font-size: 16px;
    font-weight: 600;
}
.article >>> p{
    font-size: 13px;
    color: #575759;
}
.side{
    position: absolute;
    top: 355px;
    right: 127px;
    width: 20%;
}
.sidebar-fixed{

    position: fixed;
    top: -2px;
    right: 127px;
    width: 20%;
}
.hide-card{
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 16px;
    background-color: white;
    margin: 15px 5px;
    opacity: 0.5;
}



</style>